<!DOCTYPE html>
<html lang="{{ @this->lang() }}">
<head>
    <include href="blocks/head.html" />
</head>
<body>
<include href="blocks/navbar.html" />
<div class="container">
    <div class="clearfix">
        <div class="pull-right">
            <a href="#" class="btn btn-default btn-sm" data-toggle="modal" data-target="#new" onclick="window.setTimeout('$(\'#input_name\').focus()',10);">
                <span class="fa fa-plus"></span>&ensp;{{ @dict.new }}
            </a>
        </div>
        <include href="blocks/admin/tabs.html" />
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-condensed">
            <thead>
                <tr>
                    <th data-sort="int">{{ @dict.cols.id }}</th>
                    <th data-sort="string">{{ @dict.name }}</th>
                    <th data-sort="int">{{ @dict.members }}</th>
                    <th data-sort="string">{{ @dict.task_color }}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <repeat group="{{ @groups }}" value="{{ @group }}">
                    <tr onclick="self.location='{{ @BASE }}/admin/groups/{{ @group.id }}'" style="cursor: pointer">
                        <td><a href="{{ @BASE }}/admin/groups/{{ @group.id }}">{{ @group.id }}</a></td>
                        <td>{{ @group.name | esc }}</td>
                        <td>{{ @group.count }}</td>
                        <td><span class="badge" style="background-color: #{{ @group.task_color }};">&ensp;</span>&ensp;#{{ @group.task_color }}</td>
                        <td class="clearfix">
                            <form class="pull-right" action="{{ @BASE }}/admin/groups/{{ @group.id }}/delete" method="post">
                                <csrf-token />
                                <button type="submit" class="has-tooltip" title="{{ @dict.delete }}" aria-label="{{ @dict.delete }}">
                                    <span class="fa fa-trash"></span>
                                </button>
                            </form>
                        </td>
                    </tr>
                </repeat>
            </tbody>
        </table>
    </div>
    <check if="{{ empty(@groups) }}">
        <p class="text-center">{{ @dict.no_groups_exist }}</p>
    </check>
    <include href="blocks/footer.html" />
    <script src="{{ @BASE }}/js/stupidtable.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.table').stupidtable();
    });
    </script>
</div>
<div class="modal" id="new" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" action="{{ @BASE }}/admin/groups/new" method="post">
            <csrf-token />
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="$('#input_name').val('');">&times;</button>
                <h4 class="modal-title">{{ @dict.new }}</h4>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" id="input_name" name="name" placeholder="{{ @dict.name }}">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="$('#input_name').val('');">{{ @dict.cancel }}</button>
                <button type="submit" class="btn btn-primary">{{ @dict.save }}</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>
